<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>郭郭菜单 - 柯灰</title>
    <link rel="stylesheet" type="text/css" href="./static/styles/index.css"/>
</head>
<body>
<div class="stage">
    <div class="menu">
        <table>
            <tr>
                <td>
                    <div class="menu-item" data-type="item_mht">
                        <img src="./static/images/item_mht.png" alt="mht">
                        <span class="menu-item__text">迷hotel</span>
                    </div>
                </td>
                <td>
                    <div class="menu-item" data-type="item_meixi">
                        <img src="./static/images/item_meixi.png" alt="item_meixi">
                        <span class="menu-item__text">梅西の葡萄</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="menu-item" data-type="item_bthl">
                        <img src="./static/images/item_bthl.png" alt="item_bthl">
                        <span class="menu-item__text">冰糖葫芦儿</span>
                    </div>
                </td>
                <td>
                    <div class="menu-item" data-type="item_hlg">
                        <img src="./static/images/item_hlg.png" alt="item_hlg">
                        <span class="menu-item__text">“红心”火龙果</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="menu-item" data-type="item_lanmei">
                        <img src="./static/images/item_lanmei.png" alt="item_lanmei">
                        <span class="menu-item__text">蓝莓</span>
                    </div>
                </td>
                <td>
                    <div class="menu-item" data-type="item_yzjmh">
                        <img src="./static/images/item_yzjmh.png" alt="item_yzjmh">
                        <span class="menu-item__text">有诈鸡喵儿花</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="menu-item" data-type="item_mtc">
                        <img src="./static/images/item_mtc.png" alt="item_mtc">
                        <span class="menu-item__text">好丽友墓堂存</span>
                    </div>
                </td>
                <td>
                    <div class="menu-item" data-type="item_milk">
                        <img src="./static/images/item_milk.png" alt="item_milk">
                        <span class="menu-item__text">缪可</span>
                    </div>
                </td>
            </tr>
            <!--            <tr>-->
            <!--                <td>-->
            <!--                    <div class="menu-item">-->
            <!--                        <img src="./static/images/item_mht.png" alt="mht">-->
            <!--                        <span class="menu-item__text">迷hotel</span>-->
            <!--                    </div>-->
            <!--                </td>-->
            <!--                <td>-->
            <!--                    <div class="menu-item">-->
            <!--                        <img src="./static/images/item_mht.png" alt="mht">-->
            <!--                        <span class="menu-item__text">迷hotel</span>-->
            <!--                    </div>-->
            <!--                </td>-->
            <!--            </tr>-->
        </table>
    </div>
    <div class="panel">
        <div class="panel-content" id="panel-content">
            <img id="panel-item" alt="mht" style="display:none;">
        </div>
    </div>
    <div class="face">
        <div class="eat-face" id="eat-face" style="display:none;">
            <img src="./static/images/eat.png" alt="eat">
        </div>
    </div>
    <div class="remove" id="remove" style="display:none;">
        <img src="./static/images/remove.png" alt="remove">
    </div>
</div>
<audio id="item_mht" src="./static/sounds/item_mht.mp3"></audio>
<audio id="no_eat" src="./static/sounds/no_eat.mp3"></audio>
<audio id="eat" src="./static/sounds/eat.mp3"></audio>
<audio id="item_meixi" src="./static/sounds/item_meixi.mp3"></audio>
<audio id="item_bthl" src="./static/sounds/item_bthl.mp3"></audio>
<audio id="item_hlg" src="./static/sounds/item_hlg.mp3"></audio>
<audio id="item_lanmei" src="./static/sounds/item_lanmei.mp3"></audio>
<audio id="item_milk" src="./static/sounds/item_milk.mp3"></audio>
<audio id="item_mtc" src="./static/sounds/item_mtc.mp3"></audio>
<audio id="item_yzjmh" src="./static/sounds/item_yzjmh.mp3"></audio>
<script>
const item_mht = document.querySelector('#item_mht');
const no_eat = document.querySelector('#no_eat');
const eat = document.querySelector('#eat');
const item_meixi = document.querySelector('#item_meixi');
const item_bthl = document.querySelector('#item_bthl');
const item_hlg = document.querySelector('#item_hlg');
const item_lanmei = document.getElementById('item_lanmei');
const item_milk = document.getElementById('item_milk');
const item_mtc = document.getElementById('item_mtc');
const item_yzjmh = document.getElementById('item_yzjmh');
const sounds = {
    item_mht,
    no_eat,
    eat,
    item_meixi,
    item_bthl,
    item_hlg,
    item_lanmei,
    item_milk,
    item_mtc,
    item_yzjmh,
};
const panelContent = document.querySelector('#panel-content');
const panelItem = document.querySelector('#panel-item');
const remove = document.querySelector('#remove');
const eatFace = document.getElementById('eat-face');

panelContent.addEventListener('click', function () {
    remove.style.display = 'none';
    if (panelItem.src) {
        panelItem.src = '';
        panelItem.style.display = 'none';
        sounds.eat.currentTime = 0;
        sounds.eat.play();
        eatFace.style.display = 'block';
        setTimeout(() => {
            eatFace.style.display = 'none';
        }, sounds.eat.duration * 1000);
    }
});
remove.addEventListener('click', function () {
    remove.style.display = 'none';
    if (panelItem.src) {
        panelItem.src = '';
        panelItem.style.display = 'none';
        sounds.no_eat.currentTime = 0;
        sounds.no_eat.play();
    }
});
Array.from(document.querySelectorAll('.menu-item')).forEach(item => {
    item.addEventListener('click', function () {
        panelItem.src = `./static/images/${item.dataset.type}.png`;
        panelItem.style.display = 'block';
        remove.style.display = 'block';
        const element = sounds[item.dataset.type];
        element.currentTime = (0);
        element.play();
        // setTimeout(() => {
        //     no_eat.play();
        //     setTimeout(() => {
        //         eat.play();
        //     }, no_eat.duration * 1000)
        // }, item_mht.duration * 1000 + 1000);
    });
});
</script>
</body>
</html>
